<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="./lib/bootstrap-3.3.7.css" rel="stylesheet" />
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
    <style>
      .tp01{
          font-size: 18px;
      }
    </style>
</head>
<body>
<div id="app">
    <router-link class="tp01" to="/home">首页</router-link>
    <router-view></router-view>
</div>

<template id="tpl01">
    <div>
    <h1>这里是父组件，我很大</h1>
    <router-link class="tp01" to="/home/shopping">购买</router-link>
    <router-link class="tp01" to="/home/product">商品显示</router-link>
    <router-view></router-view>
    </div>
</template>

<script>
  var tpl01 = {
    template:'#tpl01'
  }

  var tpl02 = {
      template:'<h2>点击购买商品，这里是购物车！！！</h2>'
  }
  var tpl03 = {
      template: '<h2>商品显示，这里是商品展示！！！</h2>'
  }

  const router = new VueRouter({
      routes: [
          {path:'/',redirect:'home'},
          {
              path:'/home',
              component:tpl01,
              children:[
                 {path:'shopping',component:tpl02}, // 注意，子路由的开头位置，不要加 / 路径符
                 {path:'product',component:tpl03}
              ]
          }
         
      ]
  })
 var vm = new Vue({
  el:'#app',
  data:{},
  methods:{},
  router:router
 }) ;
 </script>
</body>
</html>